<template>
  <div class="home-total">
    <div class="container">
      <div class="title">
        <h1>亿拓SCRM 全渠道链接客户 挖掘客户价值</h1>
        <p>洞察客户行为，高效跟进客户，赋能企业数字化能力</p>
      </div>

      <div class="modules">
        <ul>
          <li
            v-for="item in modulesList"
            :key="item.id"
            @mouseenter="enter(item)"
            @mouseleave="leave()"
          >
            <img :src="item.src" alt="" />
            <h1>{{ item.title }}</h1>
            <p>{{ item.cnt }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "valueComponent",

  data() {
    return {
      modulesList: [
        {
          id: 1,
          title: "连接客户",
          cnt: "抓住一切机会，全渠道链接客户",
          src: require("../assets/img/connect.jpg"),
        },
        {
          id: 2,
          title: "客户洞察",
          cnt: "对原始数据加工分析，形成全域 客户画像",
          src: require("../assets/img/Insight.png"),
        },
        {
          id: 3,
          title: "自动化培育",
          cnt: "针对潜在客户，有策略的进行自 动化培育",
          src: require("../assets/img/mine.png"),
        },
        {
          id: 4,
          title: "内容营销",
          cnt: "配合内容矩阵策略，形成内容带 动集客和培育闭环",
          src: require("../assets/img/cnt.png"),
        },
        {
          id: 5,
          title: "全渠道营销",
          cnt: "通过微信生态、短信、邮件，外 呼中心等全渠道营销和沟通触达",
          src: require("../assets/img/all.png"),
        },
        {
          id: 6,
          title: "生命周期营销",
          cnt: "围绕用户生命周期模型，在关键 节点进行自动化营销策略",
          src: require("../assets/img/cycle.png"),
        },
        {
          id: 7,
          title: "客户旅程",
          cnt: "配合自动化营销引擎，打造个性 化体验",
          src: require("../assets/img/journey.png"),
        },
        {
          id: 8,
          title: "活动管理",
          cnt: "多样的营销活动类型，对每一次 活动、计划和监控提供完整的管理",
          src: require("../assets/img/active.png"),
        },
      ],
    };
  },

  methods: {
    enter (item) {
      if (item.id === 1) {
        this.modulesList[0].src = require('../assets/img/connect-height.png');
      } else if (item.id === 2) {
        this.modulesList[1].src = require('../assets/img/Insight-height.png');
      } else if (item.id === 3) {
        this.modulesList[2].src = require('../assets/img/mine-height.png');
      } else if (item.id === 4) {
        this.modulesList[3].src = require('../assets/img/mine-height.png');
      } else if (item.id === 5) {
        this.modulesList[4].src = require('../assets/img/all-height.png');
      } else if (item.id === 6) {
        this.modulesList[5].src = require('../assets/img/cycle-height.jpg');
      } else if (item.id === 7) {
        this.modulesList[6].src = require('../assets/img/journey-height.png');
      } else if (item.id === 8) {
        this.modulesList[7].src = require('../assets/img/mine-height.png');
      }
    },

    leave () {
      this.modulesList = [
        {
          id: 1,
          title: "连接客户",
          cnt: "抓住一切机会，全渠道链接客户",
          src: require("../assets/img/connect.jpg"),
        },
        {
          id: 2,
          title: "客户洞察",
          cnt: "对原始数据加工分析，形成全域 客户画像",
          src: require("../assets/img/Insight.png"),
        },
        {
          id: 3,
          title: "自动化培育",
          cnt: "针对潜在客户，有策略的进行自 动化培育",
          src: require("../assets/img/mine.png"),
        },
        {
          id: 4,
          title: "内容营销",
          cnt: "配合内容矩阵策略，形成内容带 动集客和培育闭环",
          src: require("../assets/img/cnt.png"),
        },
        {
          id: 5,
          title: "全渠道营销",
          cnt: "通过微信生态、短信、邮件，外 呼中心等全渠道营销和沟通触达",
          src: require("../assets/img/all.png"),
        },
        {
          id: 6,
          title: "生命周期营销",
          cnt: "围绕用户生命周期模型，在关键 节点进行自动化营销策略",
          src: require("../assets/img/cycle.png"),
        },
        {
          id: 7,
          title: "客户旅程",
          cnt: "配合自动化营销引擎，打造个性 化体验",
          src: require("../assets/img/journey.png"),
        },
        {
          id: 8,
          title: "活动管理",
          cnt: "多样的营销活动类型，对每一次 活动、计划和监控提供完整的管理",
          src: require("../assets/img/active.png"),
        },
      ]
    }
  }
};
</script>

<style scoped lang="scss">
.home-total {
  background: rgb(246, 246, 246);
  width: 100%;
  .container {
    width: 1250px;
    margin: 0 auto;
    background: rgb(246, 246, 246);
  }
  li {
    list-style-type: none;
  }
  overflow: hidden;
}
.title {
  font-family: PingFangSC;
  text-align: center;
  margin: 80px 0 0 0;
  box-sizing: border-box;
  h1 {
    font-size: 36px;
    color: #333333;
    font-weight: 600;
  }
  p {
    font-size: 18px;
    font-weight: 400;
    color: #999999;
  }
}
.modules {
  font-family: PingFang SC;
  ul {
    display: flex;
    flex-wrap: wrap;
    // justify-content: center;
    justify-content: space-between;
    width: 1250px;
    margin-top: 69px;
    margin-bottom: 10px;
  }
  li {
    width: 264px;
    height: 280px;
    cursor: pointer;
    background: #ffffff;
    box-shadow: 0px 25px 50px 0px rgba(27, 27, 126, 0.03);
    border-radius: 10px;
    // margin-right: 48px;
    margin-bottom: 70px;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    padding-top: 40px;
    box-sizing: border-box;
    h1 {
      font-size: 20px;
      font-family: PingFangSC;
      font-weight: 600;
      margin: 36px 0 26px 0;
      color: #333333;
    }
    p {
      font-weight: 400;
      color: #999999;
      font-size: 14px;
      padding: 0 30px;
      line-height: 24px;
    }
    img {
      width: 56px;
      height: 56px;
    }
  }
  li:hover {
    h1 {
      color: #8aa6ff;
    }
    p {
      color: #8aa6ff;
      font-size: 16px;
    }
    img {
      width: 64px;
      height: 64px;
    }
  }
}
</style>